<template>
<div class="box">
  <div class="back" @click="$router.back()">
    <van-icon name="arrow-left" color="#fff" size="24px" />
  </div>
  <div class="content">
    <div class="content-title">
      <h2>我的足迹</h2>
      <div class="content-title-right" @click="deleteAll">
        <van-icon name="delete" size="24" color="#000" class="content-title-right-img"></van-icon>
        <span style="font-size: 16px;">清除所有</span>
      </div>
    </div>
    <div class="content-class">
      <div class="today">
        <p class="class-title">今天~</p>
        <van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" />
      </div>
      <div class="yesterday">
        <p class="class-title">昨天~</p>
        <van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" />
      </div>
      <div class="ago">
        <p class="class-title">更久前~</p>
        <van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" />
      </div>
    </div>
  </div>
</div>
</template>

<script>
import Vue from 'vue'
import { Icon, Image as VanImage } from 'vant'

Vue.use(Icon)
Vue.use(VanImage)

export default {
  methods: {
    deleteAll () {
      const clear = document.getElementsByClassName('content-class')
      clear.setAttribute('style', 'display: hidden')
    }
  }
}
</script>

<style lang="scss" scoped>
  *{margin: 0; padding: 0;}
  .box{
    padding: 20px 20px;
  }
.back{
  width:0.4rem;
  height:0.4rem;
  border-radius: 50%;
  background-color: #666;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.1rem 0.1rem;
}
.content{
  display: flex;
  flex-direction: column;
}
.content-title{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height:40px;
  line-height:40px;
  padding-top: 20px;
}
.content-title-right-img{
  top: 6px;
  margin-right:10px;
}
.today{
  padding-top: 20px;
}
.yesterday{
  padding-top: 20px;
}
.ago{
  padding-top: 20px;
}
.class-title{
  height: 30px;
  line-height: 30px;
}
</style>
